<template>
  <div class="wrap">
    <div class="container w">
      <div class="word">我的足迹</div>
      <el-divider content-position="left">
        <div>
          03. 31<span>{{ list.length }}件宝贝</span>
          <i class="el-icon-delete"> 删除当天</i>
        </div>
      </el-divider>
      <GoodsDelete :data="list"/>
    </div>
  </div>
</template>

<script>
import GoodsDelete from '@/mall/views/components/GoodsDelete'
export default {
  name: "Footprint",
  components: {GoodsDelete},
  data() {
    return {
      list: [
        {
          id: 0,
          goodsName: "想学C++不用翻教材 百度大牛带你结合实践重学C++ ",
          goodPicture: require("@/assets/common/list1.png"),
          goodPrice: 448.0,
          like: 4971,
        },
        {
          id: 1,
          goodsName: "Python3入门机器学习 经典算法与应用  入行人工智能 ",
          goodPicture: require("@/assets/common/list2.png"),
          goodPrice: 499.0,
          like: 2669,
        },
        {
          id: 2,
          goodsName: "Vue3+ElementPlus+Koa2 全栈开发后台系统",
          goodPicture: require("@/assets/common/list3.png"),
          goodPrice: 368.0,
          like: 699,
        },
        {
          id: 3,
          goodsName: "前端框架及项目面试 聚焦Vue3/React/Webpack",
          goodPicture: require("@/assets/common/list4.png"),
          goodPrice: 399.0,
          like: 3450,
        },
        {
          id: 4,
          goodsName: "体系课-数据可视化入门到精通-打造前端差异化竞争力",
          goodPicture: require("@/assets/common/list5.png"),
          goodPrice: 848.0,
          like: 1127,
        },
        {
          id: 5,
          goodsName: "Google资深工程师深度讲解Go语言 由浅入深掌握Go语言",
          goodPicture: require("@/assets/common/list6.png"),
          goodPrice: 399.0,
          like: 5246,
        },
        {
          id: 6,
          goodsName: "Kubernetes 入门到进阶实战，系统性掌握 K8s 生产实践 ",
          goodPicture: require("@/assets/common/list7.png"),
          goodPrice: 299.0,
          like: 664,
        },
        {
          id: 7,
          goodsName: "大学计算机必修课新讲--编译原理+操作系统+图形学",
          goodPicture: require("@/assets/common/list8.png"),
          goodPrice: 399.0,
          like: 1456,
        },
        {
          id: 8,
          goodsName: "大学计算机必修课新讲--编译原理+操作系统+图形学",
          goodPicture: require("@/assets/common/list8.png"),
          goodPrice: 399.0,
          like: 1456,
        },
        {
          id: 9,
          goodsName: "大学计算机必修课新讲--编译原理+操作系统+图形学",
          goodPicture: require("@/assets/common/list8.png"),
          goodPrice: 399.0,
          like: 1456,
        },
      ],
    };
  },
  created() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.wrap {
  background: #fff;
}
.w {
  width: 1200px;
  margin: 0 auto;
}
.el-divider:hover {
  i {
    display: inline;
  }
}
.word{
  visibility:hidden;
}
::v-deep .el-divider {
  margin: 30px 0;
  position: none;
  .el-divider__text {
    position: absolute;
    background-color: #fff;
    padding: 0 0px;
    color: #303133;
  }

  div {
    font-weight: 400;
    font-size: 26px;
    span {
      margin: 0px 10px;
      font-size: 14px;
    }
    
    i {
      cursor: pointer;
      font-size: 16px;
      display: none;
      color: #fff;
      // background: rgb(77, 111, 233);
      background-color: rgba(38, 39, 40, 0.5);
      border-radius: 16px;
      padding: 4px 8px;
    }
  }
}

</style>
